<template>
  <div class="main">
    <!-- {{cn}} -->
    <div class="title">
      <p>
        更新时间：<span>{{ time }}</span>
      </p>
      <p>
        数据来源：<span>{{ source }}</span>
      </p>
    </div>
    <div class="container">
      <!-- <div style="color: #1b1712; font-weight: 800; font-size: 20px">全国数据</div> -->
      <div class="data">
        <el-row :gutter="5">
          <el-col :span="4">
            <div class="grid-content cont_1">
              {{ this.cn.childStatistic }}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content" style="background-color: #a71f1f">
              <div>{{ this.cn.totalConfirmed }}</div>
              <div>累计确诊</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content" style="background-color: #33ce79">
              <div>{{ this.cn.totalCured }}</div>
              <div>累计治愈</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content" style="background-color: #faca99">
              <div>{{ this.cn.totalIncrease }}</div>
              <div>新增</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content" style="background-color: #e04848">
              <div>{{ this.cn.totalDoubtful }}</div>
              <div>累计疑似</div>
            </div> </el-col
          ><el-col :span="4">
            <div class="grid-content" style="background-color: #41403f">
              <div>{{ this.cn.totalDeath }}</div>
              <div>累计死亡</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="picture">
        <div id="line"></div>
        <div id="news">
          <el-divider
            content-position="left"
            style="font-size: 20px; font-family: 华文行楷; font-weight: 600"
            >今日早报  <i class="iconfont icon-laba-copy"></i></el-divider
          >
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="国际疫情" name="first">
              <ul>
                <h3>
                  <a
                    href="http://k.sina.com.cn/article_213815211_0cbe8fab0200142ht.html"
                    >巴西累计确诊病例超800万例</a
                  >
                </h3>
                <el-divider></el-divider>
                <h3>
                  <a
                    href="http://k.sina.com.cn/article_213815211_0cbe8fab0200142es.html"
                    >世卫组织称已落实20亿剂新冠疫苗合同</a
                  >
                </h3>
                <el-divider></el-divider>
                <h3>
                  <a
                    href="http://k.sina.com.cn/article_213815211_0cbe8fab02001427k.html"
                    >秘鲁发现首例变异新冠病毒感染病例</a
                  >
                </h3>
                <el-divider></el-divider>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="国内疫情" name="second">
              <ul>
                <h3>
                  <a
                    href="http://k.sina.com.cn/article_5729800514_15585d14200100x00p.html"
                    >石家庄疫情严峻：农历春节期间，防疫仍然不能松懈</a
                  >
                </h3>
                <el-divider></el-divider>
                <h3>
                  <a
                    href="https://www.chinanews.com/gn/2021/01-09/9382749.shtml"
                    >中国多地倡议“当地过年”缓解“防控之忧”</a
                  >
                </h3>
                <el-divider></el-divider>
                <h3>
                  <a
                    href="https://www.chinanews.com/gn/2021/01-09/9382716.shtml"
                    >明确了！接种新冠疫苗不让老百姓掏一分钱！</a
                  >
                </h3>
                <el-divider></el-divider>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="新闻速递" name="third">
              <ul>
                <h3>
                  <a
                    href="https://www.chinanews.com/tp/hd2011/2021/01-07/966854.shtml"
                    >寒潮来袭 济南趵突泉“云雾润蒸”</a
                  >
                </h3>
                <el-divider></el-divider>
                <h3>
                  <a
                    href="https://www.chinanews.com/gn/2021/01-09/9382526.shtml"
                    >首届警察节：向负重前行的人致敬</a
                  >
                </h3>
                <el-divider></el-divider>
                <h3>
                  <a
                    href="https://www.chinanews.com/gn/2021/01-08/9382245.shtml"
                    >国家能源局：寒潮天气等因素影响有限 民众用能有保障</a
                  >
                </h3>
                <el-divider></el-divider>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!--折叠面板模块-->
    <div class="content">
      <!-- 折叠面板的表头 -->
      <div class="cont_t">各个城市疫情数据:</div>
      <el-row style="font-size:14px color:#f6f6f6">
        <el-col :span="4">
          <div style="margin-left: 10px">省份</div>
        </el-col>
        <el-col :span="4">
          <div>确诊</div>
        </el-col>
        <el-col :span="4">
          <div>疑似</div>
        </el-col>
        <el-col :span="4">
          <div>治愈</div>
        </el-col>
        <el-col :span="4">
          <div>死亡</div>
        </el-col>
        <el-col :span="4">
          <div>今日新增</div>
        </el-col>
      </el-row>
      <!-- 折叠面板 -->
      
      <el-collapse accordion v-for="item in pro">
        <el-collapse-item>
          <!-- 折叠面板外露的标体和数据 标题+该省份总数据-->
          <div
            slot="title"
            style="color:black font-weight:600; font-size:16px;"
          >
            {{ item.childStatistic }}
          </div>
          <!-- 折叠面板下面的数据 -->
          <div v-for="num in item.cityArray">
            <el-row>
              <el-col :span="4">
                <div style="color:#1d1c1c; font-weight:600">{{ num.childStatistic }}</div>
              </el-col>
              <el-col :span="4">
                <div style="color:#e73c36">{{ num.totalConfirmed }}</div>
              </el-col>
              <el-col :span="4">
                <div>{{ num.totalDoubtful }}</div>
              </el-col>
              <el-col :span="4">
                <div style="color:green">{{ num.totalCured }}</div>
              </el-col>
              <el-col :span="4">
                <div style="color:#555353">{{ num.totalDeath }}</div>
              </el-col>
              <el-col :span="4">
                <div>{{ num.totalIncrease }}</div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import info from "../../assets/getOnsInfo.json";
export default {
  data() {
    return {
      info,
      time: {},
      source: {},
      cn: info.country,
      pro: info.provinceArray,
      cy: [],
      //早报模块
      count: 10,
      activeName: "second",
    };
  },
  created() {
    this.show_title();
    this.show_city();
  },
  mounted() {
    this.initEchart1();
  },
  // 加载新闻
  methods: {
    show_title() {
      this.time = this.info.dataSourceUpdateTime.updateTime;

      this.source = this.info.dataSourceUpdateTime.dataSource;

      this.cn = this.info.country;
    },
    show_city() {
      this.info.provinceArray.map((item) => {
        console.log(item.totalConfirmed);
        this.cy = item.cityArray.map((res) => {
          return res;
        });
      });
    },
    // 图表
    initEchart1() {
      //销毁图表
      echarts.init(document.getElementById("line")).dispose();
      // 初始化图标
      var myChart = echarts.init(document.getElementById("line"));
      var option = {
        title: {
          text: "折线图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["治愈", "确诊", "死亡", "疑似", "新增"],
        },
        grid: {
          right: "4%",
          left: "10%",
          bottom: "20%",
          // containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,

          axisLabel: {
            interval: 0,
            rotate: 40,
          },
          data: [
            "湖北省 ",
            "中国香港 ",
            "广东省 ",
            "上海市 ",
            "浙江省 ",
            "河南省 ",
            "湖南省 ",
            "北京市 ",
            "安徽省 ",
            "新疆维吾尔自治区 ",
            "黑龙江省 ",
            "江西省 ",
            "山东省 ",
            "四川省 ",
            "中国台湾 ",
            "江苏省 ",
            "重庆市",
            "陕西省 ",
            "福建省 ",
            "河北省 ",
            "辽宁省 ",
            "内蒙古自治区 ",
            "天津市 ",
            "广西壮族自治区",
            "云南省 ",
            "山西省 ",
            "甘肃省 ",
            "海南省 ",
            "吉林省 ",
            "贵州省 ",
            "宁夏回族自治区 ",
            "中国澳门 ",
            "青海省 ",
            "西藏自治区",
          ],
        },

        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "治愈",
            type: "line",
            // stack: "总量",
            data: [
              63637,
              8307,
              2022,
              1446,
              1293,
              1271,
              1016,
              947,
              986,
              977,
              949,
              934,
              852,
              829,
              714,
              684,
              584,
              494,
              495,
              367,
              306,
              346,
              302,
              261,
              218,
              222,
              180,
              165,
              155,
              145,
              75,
              46,
              18,
              1,
            ],
            itemStyle: {
              normal: {
                color: "#52cf39", //折线点的颜色
                lineStyle: {
                  color: "#52cf39", //折线的颜色
                },
              },
            },
          },
          {
            name: "死亡",
            type: "line",
            // stack: "总量",
            data: [
              4512,
              155,
              8,
              7,
              1,
              22,
              4,
              9,
              6,
              3,
              13,
              1,
              7,
              3,
              7,
              0,
              6,
              3,
              1,
              6,
              2,
              1,
              3,
              22,
              0,
              2,
              6,
              22,
              0,
            ],
            itemStyle: {
              normal: {
                color: "#626462", //折线点的颜色
                lineStyle: {
                  color: "#626462", //折线的颜色
                },
              },
            },
          },
          {
            name: "确诊",
            type: "line",
            // stack: "总量",
            data: [
              68149,
              9152,
              2067,
              1558,
              1306,
              1301,
              1022,
              995,
              993,
              980,
              971,
              935,
              864,
              857,
              825,
              686,
              590,
              521,
              519,
              512,
              384,
              366,
              316,
              264,
              230,
              225,
              182,
              171,
              157,
              147,
              75,
              46,
              18,
              1,
            ],
            itemStyle: {
              normal: {
                color: "#c04005", //折线点的颜色
                lineStyle: {
                  color: "#c04005", //折线的颜色
                },
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
    // 加载新闻
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
.cont_t{
  font-size:25px; 
  font-weight:800;
  color:#201e1e;
   bottom:10px;
}
.picture {
  height: 400px;
  width: 1300px;
  margin: 10px auto;
}
#line {
  float: left;
  width: 800px;
  height: 400px;
  border-radius: 5px;
  background-image: url("https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/images/79cc66862a95704652df8c41b269afdd.png?size=1434*378");
  background-size: 800px 400px;
}
#news {
  float: right;
  width: 440px;
  height: 400px;
  margin-left: 10px;
  border-radius: 5px;
}
.title {
  width: 400px;
  height: 80px;
}
.title p {
  color: slategray;
  font-size: 18px;
  font-weight: 800;
}
.title p span {
  color: rgb(10, 75, 141);
  font-size: 20px;
  font-weight: 800;
}
.container {
  width: 100%;
  height: 500px;
}

.container div {
  line-height: 29px;
}
.content {
  width: 100%;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 5px;
}
.grid-content {
  border-radius: 5px;
  min-height: 58px;
  text-align: center;
}
.grid-content div:first-child {
  font-weight: 600;
  font-size: 20px;
  color: rgb(241, 104, 7);
}
.grid-content div:nth-child(2) {
  font-size: 16px;
  font-weight: 300;
  color: rgb(233, 230, 227);
}
.data .cont_1 {
  color: #1b1712;
  font-weight: 800;
  font-size: 20px;
  background-color: #c5bdbd;
  line-height: 58px;
  text-align: center;
}
.bg-purple {
  background-color: #1b1712;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-laba-copy:before {
  content: "\e62e";
}

</style>